<template>
<div class="cart">
	<navSimple message="购物车" @goBack="goBackTop()"></navSimple>
	<div class="emptyText" v-if="showEmptyText">
		购物车空空如也 请去选购~~~
	</div>
	<div class="itembox" v-else  v-for="item in productList" @click="toDetail(item.productId)" :id="item.productId">
		<div class="selectbox" @click="ChosenItem(item.productId,item.productChecked)">
			<div class="circle " :class="{selected:item.productChecked}">
				<i class="iconfont icon-selected" v-show=item.productChecked></i>
			</div>
		</div>
		<div class="picContent">
			<img :src="imageHost+item.productMainImage"/>
		</div>
		<div class="textContent">
			<div class="itemtitle">{{item.productName}}</div>
			<div class="price">¥ {{item.productPrice}}</div>
			<div class="delAndNum">

				<div class="deleteItem" @click="deleteItem(item.productId)">
					<span >删除</span>
				</div>
				<div class="countContent">
					<i class="iconfont icon-subtract" @click="subsNum(item.quantity,item.productId)"></i><span>{{item.quantity}}</span><i class="iconfont icon-add" @click="updatesNum(item.quantity,item.productId)"></i>
				</div>
			</div>
		
		</div>
	</div>
	<div class="floatfooter">
		<div class="positionContent">
			<div class="selectAllBox" @click="selectAll()" >
				<div class="circle " :class="{selected:allchecked}">
				   <i class="iconfont icon-selected" v-show=allchecked></i>
				</div>
				<span>全选</span>
			</div>
			<div class="numberCount">
					<span >总计</span>
					<span class="totalPrice">¥{{cartTotalPrice}}</span>
			</div>
			<div class="goCheck" @click="goPayment()">
					<span class="checkOut">
						去结算
					</span>

			</div>
		</div>
		

	</div>
</div>
</template>

<script>
import navSimple from "components/units/navSimple";

var _cart=require("common/util/server/cart.js");
var _mm=require("common/util/mm.js");
export default {

  name: 'cart',
  computed:{
  			showEmptyText(){
  				return !this.productList.length
  			},
  },
  mounted(){
  			var _this= this;
  		_cart.getCartList(function(res){
 				
  			_this.productList=res.data.cartProductVoList;
  			_this.allchecked= res.data.allChecked;
  			_this.cartTotalPrice= res.data.cartTotalPrice;
  			_this.imageHost=res.data.imageHost;
  		},function(err){
  			_mm.goHome
  		})
  },
  data () {
    return {
    	productList:[],
    	allchecked:false,
    	cartTotalPrice:0,
    	imageHost:"",
    };
  },
  methods:{
  		toDetail(id){
  			window.location.href="./detail.html?productId="+id;
  		},
  		goPayment(){
  			window.location.href="./buy.html";
  		},
  		goBackTop(){
  			this.$emit("closeevent");
  			
  		},
  		selectAll(){
  			var _this=this;
  			
  			if(this.allchecked){
  				//allchecked=true 选中 
  				//取消选中
  				_cart.unselectAllProduct(function(res){
  					_this.productList=res.data.cartProductVoList;
  					_this.allchecked= res.data.allChecked;
  					_this.cartTotalPrice= res.data.cartTotalPrice;
  				},function(err){
  					_mm.goHome();
  				});
  			}else{
  				//allchecked=false 没有选中
  				//绑定选中
  				_cart.selectAllProduct(function(res){
  					_this.productList=res.data.cartProductVoList;
  					_this.allchecked= res.data.allChecked;
  					_this.cartTotalPrice= res.data.cartTotalPrice;
  				},function(err){
  					_mm.goHome();
  				});

  			}
  		},
  		ChosenItem(id,checked){
  			var _this=this;
  			if(checked){
  				//checked=1 选中 
  				//取消选中
  				_cart.unselectProduct({productId:id},function(res){
  					_this.productList=res.data.cartProductVoList;
  					_this.allchecked= res.data.allChecked;
  					_this.cartTotalPrice= res.data.cartTotalPrice;
  				},function(err){
  					_mm.goHome();
  				});
  			}else{
  				//checked=0 没有选中
  				//绑定选中
  				_cart.selectProduct({productId:id},function(res){
  					_this.productList=res.data.cartProductVoList;
  					_this.allchecked= res.data.allChecked;
  					_this.cartTotalPrice= res.data.cartTotalPrice;
  				},function(err){
  					_mm.goHome();
  				});

  			}
  		},
  		subsNum(num ,id){
  				var _this=this;
  			if (num < 2) {
  				return
  			}else{
  				var  numInfo= num-1;
  				_cart.updateProduct({productId:id,count:numInfo},function(res){
  					
  			_this.productList=res.data.cartProductVoList;
  			_this.allchecked= res.data.allChecked;
  			_this.cartTotalPrice= res.data.cartTotalPrice;
  			},function(err){
  				_mm.goHome();
  			})
  			}

  		},
  		updatesNum(num ,id){
  			var numInfo= num+1;
  			var _this=this;
  			_cart.updateProduct({productId:id,count:numInfo},function(res){
  				console.log(res);
  			_this.productList=res.data.cartProductVoList;
  			_this.allchecked= res.data.allChecked;
  			_this.cartTotalPrice= res.data.cartTotalPrice;
  			},function(err){
  				
  			})
  		},
  		deleteItem(productId){
  			
  			var _this=this;
  			if (window.confirm("客官三思 确认删除?")){
  				_cart.deleteSelectProduct({productIds:productId},function(res){
  				
  			_this.productList=res.data.cartProductVoList;
  			_this.allchecked= res.data.allChecked;
  			_this.cartTotalPrice= res.data.cartTotalPrice;
  			},function(err){
  				window.alert("超时 请登录~")
  			})

  			}
  		},
  },
  components:{
  	navSimple
  }
};
</script>

<style lang="stylus" scoped>
.cart
	position:absolute
	left:0
	top:0
	width:100%
	min-height:100%
	background:white
	.itembox
		width:90%
		border-bottom:.5px solid #e5e5e5
		color:#333
		display:flex
		height:120px
		margin:0 auto
		.selectbox
			flex:0 0 42px
			.circle
				border-radius:50%
				border:.5px solid #686868
				height:20px
				width:20px
				margin:49px 10px
				&.selected
					font-size:18px
					text-align:center
					font-weight:700
					border:none
					color:white
					background:rgb(244, 64, 43)
		.picContent
			flex:0 0 80px
			img
				margin:20px auto
				height:78px
				width:78px
		.textContent
			padding-left:10px
			height:120px
			flex:1
			font-size:18px
			.price
				height:30px
				color:rgb(244, 64, 43)
				font-weight:600
				line-height:30px
			.delAndNum
				height:30px
				font-size:20px
				vertical-align:center
				.deleteItem
					float:left
					font-size:16px
					color:#888
				.countContent
					float:right
					background:#f7f7f7
					line-height:30px
					margin-top:-13px
					text-align:center
					.iconfont
						display:inline-block
						font-size:24px
						width:30px
						margin:0 auto
					span
						display:inline-block
						width:40px
						font-size:20px
						line-height:30px
						border-left:1px solid white
						border-right:1px solid white		
	.floatfooter
		position:fixed
		left:0
		bottom:0
		height:50px
		width:100%
		border-top:.5px solid #e5e5e5
		.positionContent
			width:95%
			height:50px
			float:right
			display:flex
			text-align:center
			.selectAllBox
				flex:0 0 42px
				font-size:14px
				color:#888;
				.circle
					border-radius:50%
					border:.5px solid #686868
					height:20px
					width:20px
					margin:5px auto
					&.selected
						font-size:18px
						text-align:center
						font-weight:700
						border:none
						color:white
						background:rgb(244, 64, 43)
			.numberCount
				flex:1
				line-height:50px
				font-size:16px
				.totalPrice
					color:red
					font-size:22px
					vertical-align:middle
			.goCheck
				flex:0 0 100px
				background:red
				font-size:24px
				color:white
				.checkOut
					padding:0
					line-height:50px
.cart .textContent .itemtitle{
height:60px;
width:100%;
padding-top:5px;
text-overflow:ellipsis;
overflow:hidden;
}
@media screen and (max-width:370px){
	.cart .itembox .textContent .itemtitle{
		font-size:14px
	}
}
</style>